<!-- 协商历史 -->
<template>
  <div>
    <a-table :dataSource="tatleData" :columns="columns" bordered :pagination="false" size="small">
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'images'">
          <div class="smart-table-operate" v-if="text">
            <a-image style="width: 50px; height: 50px" :src="item" v-for="(item, index) in text" :key="index" />
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
  import { nextTick, reactive, ref, computed, watch } from 'vue'
  import { SmartLoading } from '/@/components/framework/smart-loading'
  import dayjs from 'dayjs'
  import _ from 'lodash'
  import {
    ALI_ROLE, // 角色类型
  } from '/@/constants/dict'
  import { selectDictLabel } from '/@/utils/common'

  const props = defineProps({
    rowData: {
      type: Object,
      default: () => {},
    },
  })
  // ------------------------ 事件 ------------------------

  // ------------------------ 显示与隐藏 ------------------------

  // 获取结算列表
  const tatleData = ref([])
  async function getSettlementList(data) {
    SmartLoading.show()
    tatleData.value = data
    // try {
    //   let res = await getHistoryList(data)
    //   if (res.code === 200) {
    //     tatleData.value = res.data
    //   }
    // } catch (error) {
    //   console.log(error)
    // }
    SmartLoading.hide()
  }
  async function show(rowData) {
    // let params = { complaintNo: rowData.complaintNo }
    await getSettlementList(rowData)
    // nextTick(() => {
    //   formRef.value?.clearValidate()
    // })
  }

  // ------------------------ 表单 ------------------------

  /* 列表数据 */

  const columns = ref([
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   width: 70,
    //   align: 'center',
    //   customRender: ({ index }) => {
    //     return index + 1 //(queryForm.pageNo - 1) * queryForm.pageSize + index + 1
    //   },
    // },
    {
      title: '时间',
      dataIndex: 'gmtCreate',
      customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
      ellipsis: true,
    },
    // {
    //   title: '角色',
    //   dataIndex: 'replierName',
    //   ellipsis: true,
    // },
    {
      title: '角色',
      dataIndex: 'replierRole',
      customRender: ({ text }) => {
        return selectDictLabel(ALI_ROLE, text)
      },
      ellipsis: true,
    },
    {
      title: '内容',
      dataIndex: 'content',
      ellipsis: false,
    },
    {
      title: '图片',
      dataIndex: 'images',
      // customRender: ({ text }) => {
      //   return selectDictLabel(OPERATE_TYPE, text)
      // },
      ellipsis: false,
    },
  ])

  /* 列表数据 */

  defineExpose({
    show,
  })
  watch(
    () => props.rowData,
    (val) => {
      if (props.rowData) {
        show(val)
      }
    },
    { immediate: true },
  )
</script>
